<template>
	<view class="myreservation">
		<view class="left">
			<view class="li" :class="{ active: active == 0 }" @click="cut(0)"><text>全部</text></view>
			<view class="li" :class="{ active: active == 1 }" @click="cut(1)"><text>已预约</text></view>
			<view class="li" :class="{ active: active == 3 }" @click="cut(3)"><text>已绑定</text></view>
			<view class="li" :class="{ active: active == 4 }" @click="cut(4)"><text>复审中</text></view>
			<view class="li" :class="{ active: active == 6 }" @click="cut(6)"><text>已成功</text></view>
			<view class="li" :class="{ active: active == 7 }" @click="cut(8)"><text>已排版</text></view>
			<view class="li" :class="{ active: active == 8 }" @click="cut(9)"><text>已推送</text></view>
			<view class="li" :class="{ active: active == 2 }" @click="cut(2)"><text>已失败</text></view>
			<view class="li" :class="{ active: active == 5 }" @click="cut(5)"><text>已取消</text></view>
		</view>
		<view class="right">
			<view class="ul" v-for="(item, index) in initData" :key="index">
				<view class="li"><text>媒体类型：</text>{{item.mediaTypeName}}</view>
				<view class="li"><text>媒体名称：</text>{{item.platformName}}</view>
				<view class="li"><text>投放时间：</text>{{item.launchDate}}</view>
				<view class="li">
					<text>可预约时间：</text>{{item.startOrderDate}}
				</view>
				<view class="li" >
					<text>预约状态：</text>{{item.status.desp}}
					<text class="right" @click="cancel(item.id)" v-if="item.status.value==1||item.status.value==4">取消预约</text><text class="right" @click="go_details(item.adId)" v-if="item.status.value==8">查看详情</text>
				</view>
			</view>
			
			<view v-if="initData.length==0" class="notavailable">
				<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
				<view class="nottext">暂时没有数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import advertising from '../../../servers/agent/advertising/advertising.js';
export default {

	data() {
		return {
			active: 0,
			initData:[]
			
		};
	},
	mounted() {
		this.cut(0);
	},
	methods: {
		cancel(e){
			var _this=this;
			uni.showModal({
			    content: '您确定要取消预约吗？',
				confirmColor: '#bd3c8c',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
						uni.showLoading({
							title: '操作进行中',
							mask: true
						});
						var obj=new Object();
						obj.id=e;
						advertising
							.cancel(obj)
							.then(res => {
								if(res.code==200){
									uni.hideLoading();
									_this.cut(5)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
								uni.hideLoading();
									
							})
							.catch(err => {
								console.log(new Error('请检查网络后重试'));
							});
						
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		go_details(e) {
			uni.setStorage({
				key: 'advertisingdetails',
				data: e,
				success: function() {
					uni.redirectTo({
						url: '/pages/agent/advertising/details?yuyue='+1
					});
				}
			});
		},
		cut(e) {
			console.log(121231)
			uni.showLoading({
				title: '数据加载中',
				mask: true
			});
			this.active = e;
			var obj=new Object();			
			if(e!=0){
				obj.status=e;
			}
			this.initData=[];
			advertising
				.mymedid(obj)
				.then(res => {
					if(res.code==200){
						this.initData = res.data.records	
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
						uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			
		}
		
	}
};
</script>

<style lang="less" scoped>
.myreservation {
	position: fixed;
	top: 0px;
	padding-top: 0;
	height: 100vh;
	box-sizing: border-box;
	
	display: flex;
	flex-direction: row;
	.left {
		width: 173rpx;
		background: #f4f4f4;
		.li {
			position: relative;
			line-height: 110rpx;
			padding-left: 61rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			border-left: 3rpx solid #f4f4f4;
			text:after {
				content: '';
				position: absolute;
				left: 32rpx;
				top: 43rpx;
				width: 0;
				height: 0;
				border: 11rpx solid;
				border-color: transparent transparent transparent #999999;
			}
		}
		.li.active{
			border-left: 3rpx solid #bd3c8c;
			color: #bd3c8c;
			text:after{
				border-color: transparent transparent transparent #bd3c8c;
			}
		}
	}
	.right {
		width: 577rpx;
		background: #ffffff;
		overflow-y: auto;
		.ul {
			margin: 34rpx 20rpx;
			background: #fff;
			padding: 0 20rpx;
			border-radius: 20rpx;
			box-shadow: 5rpx 0px 20rpx #c5c5c5;
			.li {
				border-bottom: 1px solid #efefef;
				line-height: 109rpx;
				color: #999999;
				font-size: 26rpx;
				text {
					display: inline-block;
					width: 200rpx;
					color: #333333;
					text-align-last: justify;
					font-size: 28rpx;
				}
				.right {
					width: 160rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					margin-top: 25rpx;
					color: #f70225;
					border: 1px solid #f70225;
					border-radius: 40rpx;
					text-align: center;
					text-align-last: auto;
				}
			}
			.li:nth-last-child(1) {
				border-bottom: none;
			}
		}
	}
}
</style>
